<script setup lang="ts">
import BtnRow from "@/views/home/btnRow.vue";
import Contents from "@/views/home/contents.vue";
import Dialogues from "@/views/home/dialogues.vue";
import Setting from "@/views/home/setting.vue";
import {provide, ref, useTemplateRef} from "vue";

const selectTitle = ref<number | null>(null)
const chatLoading = ref(false)

const contentsDom = useTemplateRef<InstanceType<typeof Contents> | null>('contentsDom')
const dialoguesDom = useTemplateRef<InstanceType<typeof Dialogues> | null>('dialoguesDom')

const selectTitleFunc = (titleId: number) => {
  selectTitle.value = titleId
}
const newChatFunc = () => {
  selectTitle.value = null
}
const chatAddContentFunc = (obj: {
  role: string,
  content: string
}) => {
  contentsDom.value?.chatAddContentFunc(obj)
}
const chatContentLoadingFunc = (b: boolean) => {
  chatLoading.value = b
}
const selectTitle2Func = async (titleId: number) => {
  selectTitleFunc(titleId)
  await dialoguesDom.value?.refresh()
}

provide('selectTitle2Func', selectTitle2Func)
</script>

<template>
  <div class="el">
    <div class="left">
      <Dialogues
        ref="dialoguesDom"
        :select-title-id="selectTitle"
        @select-title="selectTitleFunc"
      />
    </div>
    <div class="right">
      <Contents
        ref="contentsDom"
        :chat-loading="chatLoading"
        :select-title-id="selectTitle"
      />
      <BtnRow
        :chat-loading="chatLoading"
        :select-title-id="selectTitle"
        @new-chat="newChatFunc"
        @chat-add-content="chatAddContentFunc"
        @chat-content-loading="chatContentLoadingFunc"
        @select-title2="selectTitle2Func"
      />
    </div>
  </div>

  <Setting />
</template>

<style scoped>
.el {
  display: flex;
  width: 100%;
  height: 100%;

  > .left {
    flex: none;
    width: 20rem;
    overflow: auto;
  }

  > .right {
    flex: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    height: 100%;

    > * {
      margin: 0 auto;
      width: 72rem;

      &:nth-child(1) {
        flex: 1;
      }

      &:nth-child(2) {
        flex: 0;
      }
    }
  }
}
</style>
